<template>
    <div class="persongatelogitem">
        

        <div class="itemMiddle">
            <div class="visitname" @click="handleNameClick">
                <div class="username">{{value.name}}</div>
                <span v-if="value.job_no != '-'" class="staffId">({{ value.job_no }})</span>
                <van-tag v-if="value.org_name" type="primary" style="padding-bottom: 1px;margin-left: 4px;" :color="getTagColor">{{ value.org_name }}</van-tag>
            </div>            
         </div>
 
        <div class="itemtop" v-if="value.college_name">
            <!-- <div><van-tag style="padding:2px 10px;font-size: 12px;" :color="color">入</van-tag></div> -->
            <van-icon name="home-o" style="margin-right: 6px;"/>
            <div class="logtime">{{ value.college_name }}</div>
        </div>
        
        <div class="itemtop">
            <!-- <div><van-tag style="padding:2px 10px;font-size: 12px;" :color="color">入</van-tag></div> -->
            <van-icon name="clock-o" style="margin-right: 6px;"/>
            <div class="logtime">{{ value.created_at }}</div>
        </div>
        
        <div class="address">
            <van-icon name="location-o" size="16"/>
            {{ value.src_name }}
        </div>

        <div class="showDetail detailBtns"  v-if="showViewStaff ">            
            <van-button size="small"  color="#1989fa"  class="optBtns" @click="handleViewUser">教职工信息</van-button>            
        </div>

        
    </div>
</template>
<script lang="ts" setup>
import type { PersonVisitInfo } from '@/types/common';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

interface PersonGateLogProps{
    color?:string
    value:PersonVisitInfo
    showBtns?:boolean
}
const props = defineProps<PersonGateLogProps>();

const router = useRouter();
const handleViewUser = ()=>{
    router.push('/query/person/personAllInfoDetail?id='+props.value.job_no);
}

const showViewStaff = computed(()=>{
    if(props.showBtns && props.value.org_name?.indexOf('教职工') != -1) {
        return true;
    }else{
        return false;
    }
})

const handleNameClick = ()=>{
    if(showViewStaff.value){
        handleViewUser()
    }
}

const getTagColor = computed(()=>{
    if(props.value.org_name?.indexOf('访客') != -1){
        return '#ff7b00'
    }
    return ''
})


</script>
<style lang="less" scoped>
.persongatelogitem{
    .itemtop{
        display: flex;
        margin-bottom: 6px;
        align-items: center;
        .logtime{
            font-size: 16px;
        }

        
    }

    .itemMiddle{
        
        height: 25px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .visitname{
            font-size:16px;
            margin-right: 10px;
            display:flex;
            align-items: center;


            .username{
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-left: 16px;
                    font-size: 17px;
                    font-weight: bold;
            }
            .staffId{
                font-weight: bold;
            }
        }
    }

    .detailBtns{
        border-top: 1px dashed #666;
        text-align: right;
        margin-top: 10px;
        padding-top: 10px;
    }
}
</style>